<!--
 * @Author: 陆成杰
 * @Date: 2022-06-28 11:26:27
 * @LastEditTime: 2022-07-03 08:48:45
 * @LastEditors: 陆成杰
 * @FilePath: /boe/src/views/program-manager/Pulish.vue
 * Copyright (c) ${now_year} by zucc-陆成杰, All Rights Reserved. 
-->
<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <div class="header-exit" @click="goback">
        <div class="header-exit-img">
          <img src="../../assets/publish/exit.svg" alt="" />
        </div>
        <div class="header-exit-btn"><button>退出编辑</button></div>
      </div>
      <div class="header-name">{{ state.name }}</div>
      <div class="header-does">
        <div class="header-does-item">
          <div class="header-does-item-img">
            <img src="../../assets/publish/upload.svg" alt="" />
          </div>
          <div class="header-does-item-btn"><button>上传素材</button></div>
        </div>
        <div class="header-does-item">
          <div class="header-does-item-img">
            <img src="../../assets/publish/look.svg" alt="" />
          </div>
          <div class="header-does-item-btn"><button>预览</button></div>
        </div>
        <div class="header-does-item">
          <div class="header-does-item-img">
            <img src="../../assets/publish/cun.svg" alt="" />
          </div>
          <div class="header-does-item-btn"><button>保存</button></div>
        </div>
        <div class="header-does-item">
          <div class="header-does-item-img">
            <img src="../../assets/publish/publish.svg" alt="" />
          </div>
          <div class="header-does-item-btn"><button @click="publisImmediately">一键发布</button></div>
        </div>
      </div>
    </div>
    <div style="display: flex">
      <!-- 左边 -->
      <div class="aside">
        <div class="aside-title">布局选择</div>
        <div class="aside-item1"></div>
        <div class="aside-item2">
          <div class="aside-item2-line"></div>
        </div>
        <div class="aside-item3">
          <div class="aside-item3-line1"></div>
          <div class="aside-item3-line2"></div>
        </div>
        <div class="aside-item4">
          <div class="aside-item4-line3"></div>
          <div class="aside-item4-line1"></div>
          <div class="aside-item4-line2"></div>
        </div>
        <div class="aside-title">基本组件</div>
        <div style="display: flex; justify-content: space-around">
          <div class="aside-title-item1">
            <div class="aside-title-item1-img">
              <img src="../../assets/publish/time.svg" alt="" />
            </div>
            <div style="color: black; font-size: 12px; text-align: center">
              时间
            </div>
          </div>
          <div class="aside-title-item1">
            <div class="aside-title-item1-img">
              <img src="../../assets/publish/txt.svg" alt="" />
            </div>
            <div style="color: black; font-size: 12px; text-align: center">
              文本框
            </div>
          </div>
        </div>
        <div
          style="display: flex; justify-content: space-around; margin-top: 10px"
        >
          <div class="aside-title-item1">
            <div class="aside-title-item1-img">
              <img src="../../assets/publish/display.svg" alt="" />
            </div>
            <div style="color: black; font-size: 12px; text-align: center">
              自定义布局
            </div>
          </div>
          <div class="aside-title-item1">
            <div class="aside-title-item1-img">
              <img src="../../assets/publish/web.svg" alt="" />
            </div>
            <div style="color: black; font-size: 12px; text-align: center">
              网页
            </div>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="main" style="position: relative">
        <!-- <Quill class="main-quill"></Quill> -->
        <div>
          <div style="margin-left: 30%; margin-top: 8px">
            <el-image
              style="width: 384.75px; height: 684px"
              :src="state.url"
              fit="fill"
            >
              <template #error>
                <div class="image-slot">
                  <!-- <el-icon><icon-picture /></el-icon> -->
                </div> </template
            ></el-image>
          </div>
        </div>
        <div class="addImg">
          <SmallImg :urlList="state.urlList"></SmallImg>
        </div>
      </div>
      <!-- 右边 -->
      <div class="rightside">
        <div style="color: #fff; margin: 20px">画布</div>
        <div><Material @on-click="getPic"></Material></div>
      </div>
    </div>

    <div>
      <el-dialog v-model="dialogVisible" title="退出编辑" width="40%">
        <span>是否保存当前节目</span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="backpub">不保存</el-button>
            <el-button type="primary" @click="backpub">保存</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import Material from "./Material.vue";
import { useRoute, useRouter } from "vue-router";
import Quill from "./Quill.vue";
import SmallImg from "./SmallImg.vue";
import { addShow } from "../../axios/show"
const dialogVisible = ref(false);

const router = useRouter();
const route = useRoute();


const state = reactive({
  url: "",
  urlList: [],
  name: route.params.name,
});


const goback = () => {
  dialogVisible.value = true;
};
const backpub = () => {
  router.back();
};

const getPic = (url: string) => {
  state.url = url;
  state.urlList.push(url)
  
  let set = new Set(state.urlList);
  state.urlList = Array.from(set);
  console.log(state.urlList);
  
};

const publisImmediately = () => {
  addShow( state.name, 11, "1", JSON.stringify(state.urlList), "1080x1920" ).then(res => {
    console.log(res);
    if(res.code == 200){
      router.replace('/publishprogram')
    }
  })
}
</script>

<style lang="less" scoped>
html,
body {
  height: 100%;
}
.header {
  width: 100%;
  height: 8vh;
  background-color: #373847;
  border-bottom: 1px solid #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &-exit {
    display: flex;
    margin-left: 20px;
    &-img img {
      width: 20px;
      height: 20px;
    }
    &-btn button {
      border: none;
      background: none;
      color: #bfbec2;
      line-height: 20px;
    }
  }
  &-name {
    color: #bfbec2;
    font-size: 18px;
    text-align: center;
  }
  &-does {
    color: #bfbec2;
    display: flex;
    margin-right: 20px;
    &-item {
      display: flex;
      margin-left: 10px;
    }
    &-item-img img {
      width: 20px;
      height: 20px;
    }
    &-item-btn button {
      border: none;
      background: none;
      color: #bfbec2;
      // line-height: 15px;
    }
  }
}
.aside {
  width: 11%;
  height: 92vh;
  background-color: #282935;
  // margin-top: -60px;
  &-title {
    padding: 20px;
    color: #696a72;
    font-size: 16px;
    font-weight: 500;
    &-item1 {
      width: 62px;
      height: 70px;
      background-color: #bfbec2;
      &-img img {
        width: 40px;
        height: 40px;
        padding-left: 11px;
        padding-top: 5px;
      }
    }
  }
  &-item1 {
    width: 130px;
    height: 70px;
    margin-left: 15%;
    background-color: #3e3f4a;
    border: solid rgb(100, 100, 100, 0.6);
    // position: relative;
  }
  &-item2 {
    width: 130px;
    height: 70px;
    margin-left: 15%;
    background-color: #3e3f4a;
    margin-top: 20px;
    border: solid rgb(100, 100, 100, 0.6);
    // position: absolute;
    &-line {
      // position: absolute;
      width: 1px;
      height: 70px;
      background-color: rgb(100, 100, 100, 0.6);
      margin-left: 65px;
    }
  }
  &-item3 {
    width: 130px;
    height: 70px;
    margin-left: 15%;
    background-color: #3e3f4a;
    margin-top: 20px;
    border: solid rgb(100, 100, 100, 0.6);
    &-line1 {
      // position: absolute;
      width: 130px;
      height: 1px;
      background-color: rgb(100, 100, 100, 0.6);
      margin-top: 35px;
    }
    &-line2 {
      // position: absolute;
      width: 1px;
      height: 35px;
      background-color: rgb(100, 100, 100, 0.6);
      margin-left: 65px;
    }
  }
  &-item4 {
    width: 130px;
    height: 70px;
    margin-left: 15%;
    background-color: #3e3f4a;
    margin-top: 20px;
    border: solid rgb(100, 100, 100, 0.6);
    &-line1 {
      // position: absolute;
      width: 130px;
      height: 1px;
      background-color: rgb(100, 100, 100, 0.6);
      margin-top: 0px;
    }
    &-line2 {
      // position: absolute;
      // display: inline;
      width: 1px;
      height: 35px;
      background-color: rgb(100, 100, 100, 0.6);
      margin-left: 65px;
    }
    &-line3 {
      width: 1px;
      height: 35px;
      background-color: rgb(100, 100, 100, 0.6);
      margin-left: 65px;
    }
  }
}
.main {
  width: 63%;
  height: 80vh;
  background-color: #282935;
  border: 6vh solid #3f3f3c;
  &-quill {
    height: 75vh;
    color: #fff;
  }
}
.rightside {
  width: 20%;
  height: 92vh;
  background-color: #282935;
}
.addImg {
  position: absolute;
  // width: 400px;
  height: 200px;
  // border: 2px solid #000;
  box-shadow: 1px 1px 10px 2px #000;
  background-color: #282935;
  bottom: -50px;
  right: -70px;
}
</style>